.gift-bag-page {
  box-sizing: border-box;

  .header-left {
    width: 78rpx;
    image {
      width: 44rpx;
      height: 44rpx;
      padding-left: 10rpx;
      vertical-align: middle;
    }
  }

  .box-item {
    .image-box {
      background: #fff;
      height: 344rpx;
      position: relative;
      margin-bottom: 144rpx;
    }
    .main-pic {
      width: 718rpx;
      height: 466rpx;
      display: block;
      padding: 21rpx 16rpx 0 16rpx;
    }
    .main-text {
      @include flex;
      @include j-between;
      align-items: center;
      padding: 48rpx 16rpx;
      .text {
        font-size: 34rpx;
        font-weight: bold;
      }
      .details {
        @include flex;
        align-items: center;
        .details-icon {
          width: 52rpx;
          height: 8rpx;
          margin-left: 8rpx;
        }
      }
    }
  }

  // 选择商品数量
  .form{
    padding: 0 32rpx 32rpx;
    background:#fff;
    margin-top: 16rpx;
    .form-title{
      padding-top: 32rpx;
      color: #000;
      font-weight:bold;
    }
    .form-content{
      .gifts-item{
        .goods-item {
          @include flex;
          align-items: center;
          color: #000;
          &:first-child {
            padding-top: 32rpx;
          }
          .goods-pic {
            width: 140rpx;
            height: 140rpx;
            margin-right: 24rpx;
          }
          .goods-content {
            .money-item {
              @include flex;
              @include j-between;
              font-size: 24rpx;
              margin-top: 16rpx;
              align-items: flex-end;
              .big-money {
                font-size: 32rpx;
              }
              .medium-text {
                font-size: 28rpx;
              }
            }
            .title {
              @include text-ellipsis-line;
              letter-spacing: 1.4rpx;
              height: 76rpx;
              line-height: 37rpx;
              width: 520rpx;
            }
          }
        }
        .gift-tips {
          margin-top: 16rpx;
          line-height: 40rpx;
          background:rgba(255,249,237,1);
          color: #FF6010;
          padding: 16rpx 32rpx;
          .title {
            width: 100%;
            margin: 0 auto;
            .disib {
              display: inline-block;
            }
            &:nth-child(2) {
              display: initial;
            }
          }
        }
      }
    }
    
  }
  .add-con{
    padding: 0 32rpx 32rpx;
    background:#fff;
    margin-top: 16rpx;
    .form-title{
      padding-top: 32rpx;
      color: #000;
      font-size: 32rpx;
      font-weight:bold;
      .title-tip{
        font-size: 28rpx;
        color: #999;
      }
    }
    .form-content{
      .gifts-item{
        .goods-item {
          @include flex;
          align-items: center;
          color: #000;
          &:first-child {
            padding-top: 32rpx;
          }
          .icon_gou{
            width: 32rpx;
            height: 32rpx;
            margin-right: 24rpx;
          }
          .img-con{
            position: relative;
            width: 160rpx;
            height: 160rpx;
            margin-right: 24rpx;
            .drop-img{
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              width: 60%;
              height: 60%;
              margin: auto;
              position: absolute;
              z-index: 2;
            }
          }
          .goods-content {
            .money-item {
              @include flex;
              @include j-between;
              font-size: 24rpx;
              margin-top: 12rpx;
              align-items: flex-end;
              .big-money {
                font-size: 32rpx;
              }
              .medium-text {
                font-size: 28rpx;
              }
              .text-flex{
                @include flex;
                @include a-center;
                .drop-text{
                  font-size: 24rpx;
                  width: 94rpx;
                  height: 38rpx;
                  line-height: 38rpx;
                  text-align: center;
                  background-color: #ccc;
                  color: white;
                  border-radius: 10rpx;
                  margin-left: -8rpx;
                  transform: scale(0.8)
                }
              }
            }
            .goods-sku{
              @include flex;
              @include a-center;
              font-size: 22rpx;
              color: #999;
              line-height: 22rpx;
              .right-icon{
                width: 18rpx;
                height: 24rpx;
                margin-left: 20rpx;
              }
            }
            .title {
              @include text-ellipsis-line;
              letter-spacing: 1.4rpx;
              height: 76rpx;
              font-size: 26rpx;
              line-height: 37rpx;
              width: 448rpx;
            }
            .gray-text{
              color: #ccc;
            }
          }
        }
        .gift-tips {
          margin-top: 16rpx;
          line-height: 40rpx;
          background:rgba(255,249,237,1);
          color: #FF6010;
          padding: 16rpx 32rpx;
          .title {
            width: 100%;
            margin: 0 auto;
            .disib {
              display: inline-block;
            }
            &:nth-child(2) {
              display: initial;
            }
          }
        }
        .gray-area{
          background: #F5F5F5;
          color: #ccc;
        }
      }
    }
  }

  // footer
  .footer-content{
    .view-freight{
      @include flex;
      @include a-center;
      @include j-between;
      color: #FF6010;
      padding: 8rpx 32rpx;
      line-height: 64rpx;
      background:rgba(255,249,237,1);

      .right-icon-orange {
        width: 20rpx;
        height: 20rpx;
      }
    }
    .btn-line{
      padding: 24rpx 32rpx;
      .btn{
        color: #fff;
        text-align: center;
        line-height: 80rpx;
        background:rgba(0,0,0,1);
      }
    }
  }

  // empty
  .empty-content{
    padding: 320rpx 0 0;
  }

  &.bottom{
    padding-bottom: 226rpx;
    padding-bottom: calc(226rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(226rpx + env(safe-area-inset-bottom));
  }
  .shopCartMask {
    .cartMain {
      vertical-align: middle;
      .goodsImg {
        vertical-align: middle;
        display: inline-block;
        margin: -60rpx 30rpx 30rpx 0px;
        image {width: 90px; height: 180rpx; border-radius: 5px; border: 1px solid #eaeaea;}
      }
      .priceBox {
        display: inline-block;
        margin-top: -10px;
        max-width: 400rpx;
        .price {
          .span {
            display: inline-block;
            .b{
              display: inline-block;
              font-size: $font-size-medium;
            }
            color: $color-price;
            font-size: $font-size-large;
          }
        }
        .skuDec {color: $color-tips; font-size: 12px;}
      }
    }
    .cartCount {
      display: flex;
      margin-top: 10px;
      justify-content: space-between;
      padding-right:20rpx;
      .title {
        color: $color-title;
        .small {
          margin-left: 5px;
          color: #FF7F00;
        }
        .min-gray {
           margin-left: 5px;
          color: #999;
          font-size: 24rpx;
        }
      }
    }
    .maskBottomBtn {
      margin-top: 80rpx;
      background-color: #000;
      border-radius: 0;
      &.gray {
        background-color: #ccc;
      }
    }
  }
}